/** 
 
*/
import React, { PureComponent } from 'react';
import { SelectC } from '../../../components';
import { connect } from 'dva';
import myStyle from './index.less';
import { Form } from 'antd';

class RelatedRulesC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      rulesData: [], // 规则列表数据
      choosedData: [], // 已选择的列表数据
      choosedAndFilterData: [], // 已选择并筛选后的列表数据
    };
    this.formRef = React.createRef();
  }

  componentDidMount() {
    this.props.onRef(this);
    this.queryRelatedRules(); // 获取关联规则列表
  }

  // 获取关联规则下拉
  queryRelatedRules = () => {
    const { tenant, modalType, choosedData, ruleId } = this.props;
    this.props.dispatch({
      type: 'limitSetting/getRulesData',
      payload: {
        tenant,
        ruleId,
      },
      callback: (data) => {
        const tempData = [];
        data.dataSource.forEach((item) => {
          tempData.push({ title: item.ruleDesc, value: item.ruleId, key: item.ruleNo });
        });
        this.setState(
          {
            rulesData: tempData,
          },
          () => {
            if (modalType != '2') return; // 新增返回
            // 编辑进行回填
            const temp = [];
            this.state.rulesData &&
              this.state.rulesData.forEach((item) => {
                if (choosedData && choosedData.indexOf(item.value) != '-1') {
                  temp.push(item);
                }
              });
            this.setState({
              choosedAndFilterData: temp,
            });
          },
        );
      },
    });
  };

  selectRulesChange = (e) => {
    let temp = [];
    temp = this.filterRulesData(this.state.rulesData, e);
    this.setState({
      choosedAndFilterData: temp,
      choosedData: e,
    });
  };

  filterRulesData = (arr1, e) => {
    const tempArr = [];
    arr1 &&
      arr1.forEach((item) => {
        if (e.indexOf(item.value) != '-1') {
          tempArr.push(item);
        }
      });
    return tempArr;
  };

  render() {
    const { rulesData, choosedAndFilterData } = this.state;
    return (
      <div className={myStyle.relatedRules}>
        <Form ref={this.formRef}>
          <div style={{ width: '278px' }}>
            <SelectC
              form={this.formRef.current}
              initialValue={this.props.choosedData}
              isMultiple={true}
              onChange={this.selectRulesChange}
              dataSource={rulesData || []}
              dataIndex={'rules'}
              placeholder={'请选择规则'}
            />
          </div>
        </Form>
        <div className={myStyle.choosedRulesBox}>
          <ul>
            {choosedAndFilterData &&
              choosedAndFilterData.map((item, index) => {
                return (
                  <li className={myStyle.choosedData} key={index}>
                    <span title={item.title}>{item.title}</span>
                  </li>
                );
              })}
          </ul>
        </div>
      </div>
    );
  }
}
export default connect(({ limitSetting, loading }) => ({
  limitSetting,
  loading,
}))(RelatedRulesC);
